<template>  
	<view class="forgot-password-page">
		<view class="container">   
			<view class="title">注册</view> 
			<view class="input-group">    
				<input class="input" type="text" v-model="phoneNumber" placeholder="请输入手机号" />    
			</view>    
			<view class="input-group">    
				<input class="input" type="password" v-model="password" placeholder="请设计密码" />    
			</view>    
			<view class="input-group flex-row">
				<input class="input" type="text" v-model="verificationCode" placeholder="请输入验证码" />    
				<button class="btn" @click="getVerificationCode">获取验证码</button>    
			</view> 
			<button class="btn" @click="register" :disabled="!phoneNumber || !password || !verificationCode">注册</button>  
		</view>  
	</view>
</template> 

<script>
	export default {
		data() {
			return {  
				phoneNumber: '',    
				password: '',    
				verificationCode: '',  // 添加验证码属性  
				verificationCodeSent: false, // 添加用于显示验证码发送状态的属性 
			}; 
		},
		methods: {
			getVerificationCode() {  
				if (!this.phoneNumber) {  
					uni.showToast({  
						title: '请输入手机号',  
						icon: 'none'  
					});  
					return;  
				}   
				uni.request({  
					url: '',  
					method: 'POST',  
					data: {  
						phoneNumber: this.phoneNumber  
					},  
					success: (res) => {  
						if (res.data.code === 200) { // 假设后端返回200表示成功  
							this.verificationCodeSent = true;  
							uni.showToast({  
								title: '验证码已发送',  
								icon: 'success'  
							});  
						} else {  
							uni.showToast({  
								title: '验证码发送失败',  
								icon: 'none'  
							});  
						}  
					},  
					fail: (err) => {  
						uni.showToast({  
							title: '网络请求失败',  
							icon: 'none'  
						});  
					}  
				});  
			},  
			register() {  
			    if (!this.phoneNumber || !this.password || !this.verificationCode) {  
			        uni.showToast({  
			            title: '请输入完整信息',  
			            icon: 'none'  
			        });  
			        return;  
			    }  
			    // 发送注册请求到后端  
			    uni.request({  
			        url: '',  
			        method: 'POST',  
			        data: {  
			            phoneNumber: this.phoneNumber,  
			            password: this.password,  
			            verificationCode: this.verificationCode  
			        },  
			        success: (res) => {  
			            if (res.data.code === 200) { // 假设后端返回200表示注册成功  
			                uni.showToast({  
			                    title: '注册成功',  
			                    icon: 'success'  
			                });   
			            } else {  
			                uni.showToast({  
			                    title: '注册失败',  
			                    icon: 'none'  
			                });  
			            }  
			        },  
			        fail: (err) => {  
			            uni.showToast({  
			                title: '网络请求失败',  
			                icon: 'none'  
			            });  
			        }  
			    });  
			}
		}  
	}
</script>

<style>  
    .forgot-password-page {  
        display: flex;  
        justify-content: center;  
        align-items: center;  
        height: 100vh;  
        padding: 20px;  
        background-color: #f6fdff;  
        box-sizing: border-box;  
        margin: 0;  
        width: 100%;  
    }  
  
    .container {  
        padding: 20px;  
        background-color: #e0faff;  
        width: 350px;  
        border-radius: 20px;  
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
        max-width: 100%;  
    }  
  
    .input-group {  
        width: 100%; /* 宽度设为100%以适应容器 */  
        height: 50px; /* 根据需要调整高度 */  
        background: #d0dfe8;  
        border-radius: 20px;  
        box-sizing: border-box;  
        padding: 0 10px; /* 内边距调整为适合的值 */  
        margin-top: 25px;  
		margin-bottom: 20px;
        display: flex; /* 设置为flex布局 */  
        align-items: center; /* 垂直居中 */  
    }  
  
    .input-group .input {  
        flex: 1; /* 占据剩余空间 */  
        height: 100%; /* 与input-group高度一致 */  
        border: none; /* 移除默认边框 */  
        border-radius: 20px; /* 圆角与input-group一致 */  
        padding: 0 10px; /* 适当的内边距 */  
        box-sizing: border-box;  
    }  
  
    .input-group .btn {  
        margin-left: 10px; /* 与输入框之间的间距 */  
        height: 100%; /* 与input-group高度一致 */  
        border-radius: 20px; /* 圆角与input-group一致 */  
    }  
	
    .title {  
        text-align: center;  
        margin-bottom: 20px;  
    }  
  
    .btn {
		display: flex;   
        justify-content: center;
        align-items: center;   
        padding: 10px 20px;  
        border: none;  
        border-radius: 20px;  
        background-color: #c1e1ff; 
        color: white;  
        cursor: pointer;  
		height: 50px; 
   }  
  
    /* 禁用按钮的样式 */  
    .btn:disabled {  
        background-color: #999; /* 禁用时背景色变暗 */  
        cursor: not-allowed;  
    }  
</style>